import React from 'react';
import { Button, Card, Modal, WhiteSpace, WingBlank,Carousel} from "antd-mobile";
import './ActorInfo.scss';
import http from "../../../util/http";
import {DoubleLeftOutlined} from "@ant-design/icons";
import cookies from 'react-cookies'


class ActorInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            actorId: this.props.location.search.split("=")[1] || 0,
            actorInfo: {},
            imageList: [],
            vipId: cookies.load("vipId"),
            isLike: 0,
            imgHeight: 176
        }
    }

    componentDidMount() {
        if(this.state.vipId){
            http.get(`api/actor/vip/${this.state.actorId}/${this.state.vipId}`).then(({data}) => {
                console.log(data)
                if (data.code === 200) {
                    this.setState({
                        isLike: data.data.like
                    })
                } else {
                    Modal.alert("提示",data.msg)
                }
            })
        }else{
            this.setState({
                isLike:0
            })
        }

        http.get(`api/actor/info/${this.state.actorId}`).then(({data}) => {
            if (data.code === 200) {
                this.setState({
                    actorInfo:{
                        ...data.data.actor,
                    },
                    imageList:[...data.data.imageList]
                })
            }
        })
    }
    // 取消收藏函数
    isCollect = () => {
        if(this.state.vipId){
            const  collectInfo={
                "resourceId": this.state.actorId,
                "relationId": this.state.vipId,
                "relationType": 5,
                "collect": this.state.isLike?2:1
            }
            http.post(`api/collect`, collectInfo).then(({data}) => {
                console.log(data)
                if (data.code === 200) {
                    this.setState({
                        isLike:!this.state.isLike
                    })

                } else {
                    Modal.alert("提示",data.msg)
                }
            })
        }else{
            Modal.alert("提示","请先登录！",[{
                text:"确定",
                onPress:()=>{
                    this.props.history.push({pathname:"/login"})
                }
            }])
        }
    };

    renderActorInfo() {
        return (
            <div className={"actor-info-main"}>
                <WingBlank>
                    <Card>
                        <Card.Body>
                            <div className={"left"}>
                                <img
                                    src={process.env.REACT_APP_BASE_API + "/img/" + this.state.actorInfo.cover}
                                    style={{width: '100%'}}
                                />
                            </div>
                            <div className={"right"}>
                                <p className={"name"}>{this.state.actorInfo.actorName}</p>
                                <p className={"sex"}>{this.state.actorInfo.sex===0?"女":(this.state.actorInfo.sex===1?"男":"未知")}</p>
                                <p className={"birthday"}>{this.state.actorInfo.birthday}</p>
                            </div>

                            <Button icon="check-circle-o" onClick={this.isCollect} inline size="small" style={{margin: '10px'}}>{this.state.isLike?"取消收藏":"收藏"}</Button>

                        </Card.Body>

                    </Card>
                    <WhiteSpace size="lg"/>
                    <div className={"introductionInfo"}>
                        <div className={"title"}>简介</div>
                        <div className={"text"}>
                            {this.state.actorInfo.profile}
                        </div>
                        <div className={"title"}>照片</div>
                        <div className={"imagesList"}>
                            {
                                <WingBlank>
                                    <Carousel className={"space-carousel"}
                                              frameOverflow="visible"
                                              cellSpacing={10}
                                              slideWidth={0.5}
                                              infinite
                                              afterChange={index => this.setState({ slideIndex: index })}
                                    >
                                        {
                                            this.state.imageList.map(((item, index) => {
                                                return <a key={index} style={{
                                                    display: 'block',
                                                    position: 'relative',
                                                    height: "180px"
                                                }}>
                                                    <img
                                                        src={process.env.REACT_APP_BASE_API + "/img/" + item.imageSrc}
                                                        alt=""
                                                        style={{ width: '100%',height:"160px", verticalAlign: 'top' }}
                                                        onLoad={() => {
                                                            window.dispatchEvent(new Event('resize'));
                                                            this.setState({ imgHeight: 'auto' });
                                                        }}
                                                    />
                                                </a>
                                            }))
                                        }
                                    </Carousel>
                                </WingBlank>
                            })
                            }
                        </div>
                    </div>
                </WingBlank>
            </div>
        )
    }
    render() {
        return (
            <div className={"actor-info"}>
                <div className={"header"}>
                    <div onClick={() => this.props.history.goBack()}><DoubleLeftOutlined/>返回</div>
                </div>
                {
                    this.renderActorInfo()
                }
            </div>
        );
    }
}
export default ActorInfo
